<script setup lang="ts">
import { useRouter, RouterLink, RouterView } from "vue-router"
import { ref, onMounted } from "@vue/runtime-core"

const router = useRouter()
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const hide = router.currentRoute.value.meta.ShowAndHide
const str = ref('')

router.beforeEach((to, from, next) => {
  // 判断有没有登录
  if (localStorage.s == 'false') {
    if (to.name == "login") {
      next()
    } else {
      router.push('login')
    }
  } else {
    next()
  }
})

onMounted(() => {
  let newS = localStorage.s
  if (newS) {
    str.value = JSON.parse(newS)
  }
})
</script>

<template>
  <nav v-if="$route.meta.show">
    <RouterLink class="nav-link" to="/home">首页</RouterLink>
    <RouterLink class="nav-link" to="/Shopping">商城</RouterLink>
    <RouterLink class="nav-link" to="/live">直播</RouterLink>
    <RouterLink class="nav-link" to="/my">我的</RouterLink>
  </nav>
  <router-view v-slot="{ Component }" :key="$route.fullPath">
    <keep-alive>

      <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />

    </keep-alive>

    <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />

  </router-view>
</template>

<style lang="scss" scoped>
nav {
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 45px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  // background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
  background-image: linear-gradient(to right, #ebbba7 0%, #cfc7f8 100%);
  // background-image: linear-gradient(to right, #ebc0fd 0%, #d9ded8 100%);


  .nav-link {
    flex: 0 0 25%;
    height: 45px;
    line-height: 45px;
    color: #000;
    text-decoration: none;
    text-align: center;
  }

  .router-link-active {
    color: red;
  }
}
</style>
